<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Radio Group Test</title>
		<link rel='stylesheet' type='text/css' href='../../ext/resources/css/ext-all.css' />
		<style type="text/css">
			body{
				background-color:#000;
			}
		
		</style>
	</head>
	<body>
		<noscript>Javascript must be enabled!</noscript>
		<div id="loadingId" class="ext-el-mask-msg loading-indicator">
			<div>Loading...</div>
		</div>

		<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../../ext/ext-all-debug.js"></script>
		<script type='text/javascript' src='radiogroup.js'></script>
		<script type="text/javascript">
			Ext.get("loadingId").remove();
			Ext.BLANK_IMAGE_URL="ext/resources/images/default/s.gif";
			Ext.onReady(function(){


            var win = new Ext.Window({
                width: 275,
                height: 200,
                title: 'Radio Group Test',
                items: [{
                    xtype: 'form',
                    labelWidth: 75,
                    labelAlign: 'right',
                    bodyStyle: 'background-color:#DFE8F6; padding-top:10px',
                    border: false,
                    items: [{
						xtype:'ux-radiogroup',
						fieldLabel:'group 0',
						boxLabel:'box 1',
						value:1,
						name:'group0'
					}, {
						xtype:'ux-radiogroup',
						fieldLabel:'group 0',
						boxLabel:'box 2',
						value:2,
						name:'group0',
						checked:true
					}, {
						xtype:'ux-radiogroup',
						fieldLabel:'group 1',
						name:'group1',
						horizontal:true,
						radios:[{
							value:1,
							boxLabel:'box 1',
							listeners:{
								'check':function(r,c){
									alert(r.boxLabel+": "+(c?"checked":"unchecked"));
								}
							}
						}, {
							value:2,
							boxLabel:'box 2',
							checked:true
						}, {
							value:3,
							boxLabel:'box 3'	
						}]
					}, {
						xtype:'ux-radiogroup',
						fieldLabel:'group 2',
						name:'group2',
						radios:[{
							value:1,
							boxLabel:'box 1'							
						}, {
							value:2,
							boxLabel:'box 2',
							checked:true
						}, {
							value:3,
							boxLabel:'box 3',
							listeners:{
								'check':function(r,c){
									alert(r.boxLabel+": "+(c?"checked":"unchecked"));
								}
							}
						}]
					}],
                    buttons: [{
                        text: 'Get Values',
                        handler: function(){
                            var values=win.getComponent(0).getForm().getValues();
							alert("values:"+Ext.encode(values));
                        }
                    }]
				}]
			});
			win.show();
		
				
			}, this);
		</script>
	</body>
</html>
